<template>
  <div class="app-container">
    <div class="dms-app-container">
      <!-- 项目列表-》点击树进行懒加载接口 -->
      <div class="inter-left">
        <el-card shadow="never">
          <div class="box-style">
            <el-tree
              :data="treeData"
              :props="defaultProps"
              default-expand-all
              @node-click="handleNodeClick"
              highlight-current
            >
              <span
                class="custom-tree-node"
                slot-scope="{ node, data }"
                @mouseover="showBtn(node)"
                @mouseleave="hiddenBtn(node)"
              >
                <!-- 项目 -->
                <template v-if="data.type === 0">
                  <span
                    style="
                      font-size: 14px;
                      width: 7vw;
                      overflow: hidden;
                      word-break: keep-all;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    "
                    >{{ node.label }}
                  </span>
                  <span v-if="showAddBtn && btnIndex === node.id">
                    <el-button
                      type="text"
                      @click.stop="addNewDocument(node, data)"
                      style="color: rgb(95, 95, 95)"
                      v-preventReClick
                    >
                      添加
                    </el-button>
                  </span>
                </template>
                <!-- 接口 -->
                <template v-else>
                  <div class="dms-node-tree">
                    <div class="dms-node-right">
                      <span
                        style="
                          max-width: 120px;
                          min-width: 50px;
                          overflow: hidden;
                          word-break: keep-all;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                      >
                        {{ node.label }}
                      </span>
                    </div>
                  </div>
                </template>
              </span>
            </el-tree>
          </div>
        </el-card>
      </div>
      <!-- 接口详细信息，可编辑修改 -->
      <div class="inter-right" v-if="showRightContent">
        <el-form
          ref="docData"
          label-width="90px"
          :rules="rules"
          :model="docData"
        >
          <el-form-item label="文档标题" prop="docTitle">
            <el-row :gutter="20">
              <el-col :span="20">
                <template v-if="isEdit">
                  <span style="font-size: 20px; font-weight: bodler">{{
                    docData.docTitle || " "
                  }}</span>
                </template>
                <el-input v-else v-model="docData.docTitle" />
              </el-col>
              <el-col :span="2">
                <el-button v-if="isEdit" @click="editValue" type="info">
                  编辑
                </el-button>
                <el-button v-else type="success" @click="saveValue">
                  保存
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="文档内容" prop="docContent">
            <mavon-editor
              :code-style="code_style"
              style="height: 700px"
              v-model="docData.docContent"
              :subfield="false"
              :default-open="'preview'"
              :toolbars-flag="false"
              :editable="false"
              :scroll-style="true"
              :box-shadow="false"
              v-if="isEdit"
              :ishljs="true"
            />
            <mavon-editor
              v-else
              v-model="docData.docContent"
              :toolbars="toolbars"
              :code-style="code_style"
              style="height: 700px"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="empty-content" v-else>
        <img src="@/assets/images/empty.png" />
        <span style="font-size: 20px; color: #909399">请选择文档</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getNote } from "@/api/dmsIms/note";
import {
  listDocument,
  getDocument,
  delDocument,
  addDocument,
  updateDocument,
  listDocumentByNoteId,
} from "@/api/dmsIms/document";
import {
  listNoteDocment,
  getNoteDocment,
  delNoteDocment,
  addNoteDocment,
  updateNoteDocment,
} from "@/api/dmsIms/noteDocment";
export default {
  name: "Document",
  data() {
    return {
      isEdit: false,
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: false, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: false, // 单双栏模式
        preview: true, // 预览
      },
      code_style: "highlight",
      defaultProps: {
        children: "children",
        label: "label",
        type: "type",
        id: "id",
        isLeaf: "leaf",
      },
      showAddBtn: false,
      btnIndex: 0,
      showRightContent: false,
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
      },
      noteId: null,
      treeData: [],
      docData: {
        id: null,
        title: "",
        docContent: "",
      },
      noteDocData: {},
      rules: {
        docTitle: [
          { required: true, message: "请输入文档标题", trigger: "blur" },
          { max: 100, message: "长度在 100 个字符以内", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.noteId = this.$route.query && this.$route.query.noteId;
    if (this.noteId) {
      getNote(this.noteId)
        .then((response) => {
          this.treeData.push({
            children: [],
            label: response.data.noteName,
            id: response.data.id,
            type: 0,
            isLeaf: false,
          });
        })
        .then((_) => {
          this.getList();
        });
    }
  },
  methods: {
    getList() {
      this.treeData[0].children = [];
      listDocumentByNoteId(this.noteId).then((response) => {
        response.rows.forEach((elem) => {
          this.treeData[0].children.push({
            id: elem.id,
            type: 1,
            label: elem.docTitle,
            isLeaf: true,
          });
        });
      });
    },
    initPage() {
      this.docData = {
        id: null,
        docTitle: "",
        docContent: "",
      };
    },
    showBtn(node) {
      this.btnIndex = node.id;
      this.showAddBtn = true;
    },
    hiddenBtn() {
      this.showAddBtn = false;
      this.btnIndex = 0;
    },
    addNewDocument() {
      this.showRightContent = true;
      this.isEdit = false;
      this.initPage();
    },
    handleNodeClick(data, node) {
      if (node.id !== 1) {
        this.initPage();
        this.showRightContent = true;
        this.isEdit = true;
        getDocument(data.id).then((response) => {
          this.docData = response.data;
          // this.docData.title = response.data.docTitle;
          // this.docData.docContent = response.data.docContent;
        });
      }
    },
    editValue() {
      this.isEdit = false;
    },
    saveValue() {
      this.$refs["docData"].validate((valid) => {
        if (valid) {
          if (this.docData.id != null) {
            updateDocument(this.docData).then((response) => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            addDocument(this.docData)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                return response.data;
              })
              .then((docId) => {
                addNoteDocment({
                  noteId: this.noteId,
                  docmentId: docId,
                }).then((_) => {
                  this.getList();
                });
              });
          }
          this.isEdit = true;
        }
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    if (from.path !== "/fileManage/note") {
      next("/fileManage/note");
    } else {
      next();
    }
  },
};
</script>

<style scope>
.inter-left {
  width: 15vw;
  height: 80vh;
}
.inter-right {
  width: 70vw;
  height: 80vh;
  min-width: 800px;
}
.box-style {
  height: 80vh;
  overflow: auto;
}
.dms-app-container {
  display: flex;
}
.custom-tree-node {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: black;
}
.dms-node-tree {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dms-node-left {
  width: 40px;
  margin-right: 2px;
  /* text-align: right; */
  font-size: 10px;
  margin-top: 2px;
}
.dms-node-right {
  display: flex;
}
.empty-content {
  display: flex;
  flex-direction: column;
  width: 70vw;
  min-width: 800px;
  height: 80vh;
  justify-content: center;
  align-items: center;
}
</style>
